<template>
	<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit" @emptyclick="emptyClick" @topclick="topClick">
		<view class="user">
			<view class="user_info_box user-blue-background ">
				<!-- 头部 -->
				<view class="user_info" @tap="goDetile('set/personal')">
					<view class="user_img">
						<image class="user_img_a" :src="imgSrc || '/static/bg/img.png'"></image>
						<view class="iden_img_v"><image :src="img"></image></view>
					</view>
					<view class="user_text">
						<view class="user_name">{{ username || '暂无昵称' }}</view>
						<view class="user_autograph">{{ title || '尚未填写个性签名' }}</view>
					</view>
				</view>
				<view class="order">
					<view class="order_item">
						<view class="num">{{zhichu.week||0}}</view>
						<view class="title">本周接单(单)</view>
					</view>
					<view class="order_item">
						<view class="num">{{zhichu.month||0}}</view>
						<view class="title">本月完成(单)</view>
					</view>
					<view class="order_item">
						<view class="num">{{zhichu._month||0}}</view>
						<view class="title">本月收入(元)</view>
					</view>
				</view>
				<view class="user_message" @tap="openNews">
					<image src="/static/personal-center/lingdang.png" mode=""></image>
					<view v-if="news" class="message_red"></view>
				</view>
			</view>

			<!-- 我的订单 -->
			<view class="myorder">
				<view class="title">
					<view class="left">
						<view class="icon"></view>
						<view class="text">我的订单</view>
					</view>
				</view>
				<view class="order_list">
					<view class="order_item" @tap="openMyOrder('0')">
						<image class="item_img" src="/static/personal-center/order1.png"></image>
						<view class="item_text">全部订单</view>
						<view class="badge" v-if="order.djd">{{ order.djd }}</view>
					</view>
					<view class="order_item" @tap="openWillBeCleaned">
						<image class="item_img" src="/static/personal-center/order2.png"></image>
						<view class="item_text">待打扫</view>
						<view class="badge" v-if="dds">{{dds }}</view>
					</view>
					<view class="order_item" @tap="openMyOrder('1')">
						<image class="item_img" src="/static/personal-center/order3.png"></image>
						<view class="item_text">待确认</view>
						<view class="badge" v-if="dqr">{{ dqr }}</view>
					</view>
					<view class="order_item" @tap="openMyOrder('2')">
						<image class="item_img" src="/static/personal-center/order4.png"></image>
						<view class="item_text">已完成</view>
						<view class="badge" v-if="order.wc">{{ order.wc }}</view>
					</view>
				</view>
			</view>

			<!-- 图片 -->
			<image @tap="openRanking" class="hotel_img" src="/static/user/cleaner.png" mode=""></image>

			<!-- 全部功能 -->
			<view class="entire">
				<view class="title">
					<view class="icon"></view>
					<view class="text">全部功能</view>
				</view>
				<view class="entire-list1">
					<view class="entire-item" @tap="goDetile('account/wallet')">
						<image class="img" src="/static/user/wallet.png" mode=""></image>
						<view>我的钱包</view>
					</view>
					<view class="entire-item" @tap="evaluate">
						<image class="img" src="/static/user/message.png" mode=""></image>
						<view>我的评价</view>
					</view>
					<view class="entire-item" @tap="goDetile('my-invitation')">
						<image class="img" src="/static/user/invitation.png" mode=""></image>
						<view>我的邀请</view>
					</view>
					<view class="entire-item" @tap="openInspect">
						<image class="img" src="/static/user/abnormal.png" mode=""></image>
						<view>异常检测</view>
					</view>
				</view>
				<view class="entire-list2">
					<view class="entire-item" @tap="dial">
						<image class="img" src="/static/user/kefu.png" mode=""></image>
						<view>客服中心</view>
					</view>
					<view class="entire-item" @tap="goDetile('notice/notice')">
						<image class="img" src="/static/user/notice.png" mode=""></image>
						<view>平台公告</view>
					</view>
					<view class="entire-item" @tap="goHotel('fans/focus')">
						<image class="img" src="/static/user/attention.png" mode=""></image>
						<view>我的关注</view>
					</view>
					<view class="entire-item" @tap="team">
						<image class="img" src="/static/user/team.png" mode=""></image>
						<view>团队统计</view>
					</view>
				</view>
				<view class="entire-list3">
					<view class="entire-item" @tap="goDetile('rest/rest')">
						<image class="img" src="/static/user/symbiosis.png" mode=""></image>
						<view>我要合作</view>
					</view>
					<view class="entire-item" @tap="goDetile('set/index')">
						<image class="img" src="/static/user/set.png" mode=""></image>
						<view>设置中心</view>
					</view>
					<view class="entire-item" @tap="goDetile('about-us')">
						<image class="img" src="/static/user/isme.png" mode=""></image>
						<view>关于我们</view>
					</view>
					<view class="entire-item"  @tap="goDetile('help/help')">
						<image class="img" src="/static/user/help.png" mode=""></image>
						<view>帮助中心</view>
					</view>
				</view>
			</view>
			<view class="eng"></view>	
		</view>
	</mescroll-uni>
</template>

<script>
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
import { mapMutations } from 'vuex';
export default {
	components: {
		MescrollUni
	},
	data() {
		return {
			zhichu:{},
			img: '/static/personal-center/lv.png',
			fans: '',
			follow: '',
			points: 0,
			mescroll: null, //mescroll实例对象
			
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				autoShowLoading: true, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
				isLock: false, // 是否锁定下拉刷新,默认false;
				isBoth: true, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认true,两者可同时触发;
				offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
				inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
				outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
				bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
				minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
				textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
				textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
				textLoading: '正在刷新...' // 加载中的提示文本
			},
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				isLock: false, // 是否锁定上拉加载,默认false;
				isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10, // 每页数据的数量
					time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
				},
				noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
				textLoading: '加载中 ...', // 加载中的提示文本
				textNoMore: '-- END --', // 没有更多数据的提示文本
				toTop: {
					// 回到顶部按钮,需配置src才显示
					src: 'http://www.mescroll.com/img/mescroll-totop.png', // 图片路径
					offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
					duration: 300 // 回到顶部的动画时长,默认300ms
				},
				empty: {
					use: true, // 是否显示空布局
					icon: 'http://www.mescroll.com/img/mescroll-empty.png', // 图标路径
					tip: '~ 暂无相关数据 ~', // 提示
					btnText: '去逛逛 >', // 按钮
					fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效
					top: '35%', // fixed定位的top值 (完整的单位值,如 "35%"; "300upx")
					zIndex: 99 // fixed定位z-index值
				}
			}
		};
	},
	onUnload() {
		this.mescroll = null;
	},
	//注册滚动到底部的事件,用于上拉加载
	onReachBottom() {
		this.mescroll && this.mescroll.onReachBottom();
	},
	//注册列表滚动事件,用于下拉刷新
	onPageScroll(e) {
		this.mescroll && this.mescroll.onPageScroll(e);
	},
	methods: {
		...mapMutations({
					changeCleanerOrder:'changeCleanerOrder' // 将 `this.changeCleanerOrder()` 映射为 `this.$store.commit('changeCleanerOrder')`
				
		}),
		evaluate() {
			uni.navigateTo({
				url: '/pages/hotel/cleaner/comment?id=' + this.isLogin().id
			});
		},
		goDetile(url) {
			uni.navigateTo({
				url: '/pages/user/' + url,
				animationType: this.GLOBAL.openAnimation,
				animationDuration: this.GLOBAL.animationTime
			});
		},
		dial() {
			uni.makePhoneCall({
				phoneNumber: this.customerService //仅为示例
			});
		},
		goHotel(url) {
			/**
			 * 跳转粉丝/关注
			 */
			uni.navigateTo({
				url: '/pages/cleaner/' + url,
				animationType: this.GLOBAL.openAnimation,
				animationDuration: this.GLOBAL.animationTime
			});
		},
		/**
		 * 打开待打扫页面
		 */
		openWillBeCleaned() {
			uni.navigateTo({
				url: '/pages/cleaner/order/will-be-cleaned',
				animationType: this.GLOBAL.openAnimation,
				animationDuration: this.GLOBAL.animationTime
			});
		},
		/**
		 * 打开我的订单 all 全部  confirmed 待确认  complete 已完成
		 */
		openMyOrder(val) {
			uni.navigateTo({
				url: '/pages/cleaner/order/my_order?type=' + val,
				animationType: this.GLOBAL.openAnimation,
				animationDuration: this.GLOBAL.animationTime
			});
		},
		team(){
			/**
			 *跳转team 
			 */
			if(!this.clean_team){
				this.showToast('您还没有团队呢');
				return;
			}
			uni.navigateTo({
				url: '/pages/team/team'
			});
		},
		fansData() {
			uni.$on('fans', v => {
				console.log(v);
				this.follow = this.follow + 1;
			});
		},
		focus() {
			uni.$on('focus', v => {
				this.follow = v;
				this.focus();
			});
		},
		/**
		 * 打开收入排行榜
		 */
		openRanking(){
			uni.navigateTo({
				url: '/pages/cleaner/ranking/ranking-list',
				animationType: this.GLOBAL.openAnimation,
				animationDuration: this.GLOBAL.animationTime
			});
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调 */
		downCallback(mescroll) {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
			mescroll.resetUpScroll();
			this.req(
				{
					url: 'user/accountInfo',
					method: 'get',
					data: {
						id: this.isLogin().id
					}
				},
				res => {
					if(res.data.data.week_order_statis&&res.data.data.month_order_statis){
						this.zhichu = {
							week:res.data.data.week_order_statis.order_count,
							month:res.data.data.month_order_statis.order_count,
							_month:res.data.data.month_order_statis.pay_sum
						}
					}

					this.points = res.data.data.points;
					if (res.data.data.order_status_count) {
						let order = {
							dds: '',
							dqr: '',
							ywc: ''
						};
						res.data.data.order_status_count.forEach(v => {
							if (v.order_count >= 99) {
								v.order_count = '99+';
							}
							switch (v.order_state) {
								case 20:
									order.dds = v.order_count;
									break;
								case 30:
									order.dqr = v.order_count;
									break;
								default:
									break;
							}
						});
						for (let key in order) {
							this.changeCleanerOrder({key:key,value:order[key]});
						}
					}
					mescroll.endSuccess(10);
				},
				res => {
					mescroll.endSuccess(10);
				}
			);
		},
		upCallback(mescroll) {},
		openNews() {
			uni.navigateTo({
				url: '/pages/user/news/news'
			});
		},
		/**
		 * 打开检测页面
		 */
		openInspect() {
			uni.navigateTo({
				url: '/pages/cleaner/inspect/inspect',
				animationType: this.GLOBAL.openAnimation,
				animationDuration: this.GLOBAL.animationTime
			});
		},
		
	},

	computed: {
		dds() {
			return this.$store.state.cleaner.dds;
		},
		dqr() {
			return this.$store.state.cleaner.dqr;
		},
		news(){
			return this.$store.state.haveNews;
		},
		username() {
			return this.$store.state.username;
		},
		title() {
			return this.$store.state.title;
		},
		imgSrc() {
			if (this.$store.state.avatarUrl) {
				return this.$store.state.avatarUrl;
			}
		},
		customerService() {
			return this.appConfig().customer_service;
		}
	},
	created() {
		this.focus();
		this.fansData();
		this.req(
			{
				url: 'user/accountInfo',
				method: 'get',
				data: {
					id: this.isLogin().id
				}
			},
			res => {
				if (res.data.data.list_setup) {
					this.follow = res.data.data.list_setup.follow;
					this.fans = res.data.data.list_setup.fans;
				}
				if (res.data.data.list_setup) {
					this.follow = res.data.data.list_setup.follow;
					this.fans = res.data.data.list_setup.fans;
				}
				if (res.data.data.order_status_count) {
					let order = {
						dds: '',
						dqr: '',
						ywc: ''
					};
					res.data.data.order_status_count.forEach(v => {
						if (v.order_count >= 99) {
							v.order_count = '99+';
						}
						switch (v.order_state) {
							case 20:
								order.dds = v.order_count;
								break;
							case 30:
								order.dqr = v.order_count;
								break;
							default:
								break;
						}
					});
					for (let key in order) {
						this.changeCleanerOrder({key:key,value:order[key]});
					}
					
				}
			}
		);
	},
	mounted() {
		console.log(this.$store.state);
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	}
};
</script>

<style lang="scss" scoped>
.user {
	color: #333333;
	background-color: #f8f8f8;
	.user_info_box {
		width: 100%;
		height: 393upx;
		position: relative;
		background-size: 100vw 393upx;
	}

	.user_info {
		position: absolute;
		margin: 0 auto;
		top: 40upx;
		left: 0;
		right: 0;
		width: 610upx;
		height: 140upx;

		.user_img {
			width: 140upx;
			height: 140upx;
			position: relative;
			float: left;

			.user_img_a {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				will-change: transform;
			}

			.iden_img_v {
				position: absolute;
				border-radius: 50%;
				width: 40upx;
				background: #ffffff;
				height: 40upx;
				right: -8upx;
				bottom: 6upx;

				image {
					margin: 10upx 8upx;
					width: 25upx;
					height: 19upx;
				}
			}
		}

		.user_text {
			float: left;
			margin-left: 38upx;
			height: 100%;
			width: calc(100% - 178upx);

			.user_name {
				margin-top: 24upx;
				line-height: 1;
				font-size: 32upx;
				color: #ffffff;
			}

			.user_autograph {
				margin-top: 38upx;
				line-height: 1;
				font-size: 24upx;
				letter-spacing: 0px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				color: #cce3fc;
			}
		}
	}

	.order {
		position: absolute;
		left: 24upx;
		width: 702upx;
		bottom: -40upx;
		height: 200upx;
		background-color: #ffffff;
		box-shadow: 0px 1upx 11upx 0upx rgba(0, 0, 0, 0.08);
		border-radius: 8upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #333333;
		line-height: 1;
		.order_item {
			height: 126upx;
			font-size: 24upx;
			text-align: center;
			.num {
				font-size: 50upx;
				color: #f9d635;
				line-height: 90upx;
			}
		}
	}
	.user_message {
		position: absolute;
		right: 0upx;
		top: 0upx;
		width: 100upx;
		height: 100upx;

		image {
			position: absolute;
			right: 24upx;
			top: 41upx;
			width: 33upx;
			height: 40upx;
		}

		.message_red {
			position: absolute;
			right: 30upx;
			top: 38upx;
			width: 8upx;
			height: 8upx;
			border-radius: 50%;
			background: red;
		}
	}
	.myorder {
		margin: 0 auto;
		margin-top: 70upx;
		width: 702upx;
		height: 270upx;
		background-color: #ffffff;
		box-shadow: 0upx 1upx 11upx 0upx rgba(0, 0, 0, 0.08);
		border-radius: 8upx;
		.title::after {
			display: block;
			content: '';
			width: 702upx;
			height: 2upx;
			background-color: #e5e5e5;
		}
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 702upx;
			height: 94upx;
			.left {
				display: flex;
				align-items: center;
				height: 94upx;
				.icon {
					width: 10upx;
					height: 34upx;
					background-color: #3595f9;
					border-radius: 2upx;
					margin-right: 18upx;
				}
				.text {
					font-size: 36upx;
				}
			}
			.right {
				display: flex;
				align-items: center;
				height: 94upx;
				image {
					width: 28upx;
					height: 28upx;
					padding: 0 24upx 0 10upx;
				}
				.text {
					font-size: 28upx;
					color: #999999;
				}
			}
		}
		.order_list {
			height: 176upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 70upx;
			.order_item{
				position: relative;
				.item_img {
					width: 50upx;
					height: 50upx;
					display: block;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}
				.badge {
					position: absolute;
					width: 34upx;
					height: 34upx;
					border-radius: 50%;
					background-color: rgb(250, 74, 48);
					color: #ffffff;
					font-size: 22upx;
					display: flex;
					justify-content: center;
					align-items: center;
					right: 0upx;
					top: -15upx;
					font-weight: 500;
					z-index: 99;
				}
				.item_text {
					text-align: center;
					margin-top: 18upx;
					font-size: 24upx;
					line-height: 1;
				}
			}
		}
	}
	.hotel_img {
		width: 710upx;
		height: 183upx;
		display: block;
		margin: 0 auto;
		margin-top: 15upx;
	}

	.entire {
		margin: 24upx;
		margin-bottom: 0;
		width: 702upx;
		background-color: #ffffff;
		box-shadow: 0upx 1upx 11upx 0upx rgba(0, 0, 0, 0.08);
		border-radius: 8upx;
		.title {
			display: flex;
			align-items: flex-end;
			width: 702upx;
			height: 64upx;
			.icon {
				width: 10upx;
				height: 34upx;
				background-color: #3595f9;
				border-radius: 2upx;
				margin-right: 18upx;
			}
			.text {
				font-size: 36upx;
				line-height: 1;
			}
		}
		.entire-list1,
		.entire-list2,
		.entire-list3{
			height: 160upx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.entire-item {
				font-size: 24upx;
				width: 4em;
				color: #333333;
				line-height: 34upx;
				text-align: center;
				image {
					width: 54upx;
					height: 54upx;
				}
			}
		}
	}
	.eng {
		width: 750upx;
		height: 78upx;
	}
}
</style>
